<template>
    <view class="page">
		<view class="head-bg">
			<text class="title">选车</text>
		</view>
        <!-- 背景图 -->
        <!-- <image class="bg" src="../../static/tab_car_bg.png"></image> -->
         <!-- <u-button type="primary" @click="goSelectCity">选择城市</u-button> -->
		<view class="top-bg">
			<!-- <view class="serach-box">
				<view @click="goSelectCity" v-if="isCity">选择城市</view>
				<view @click="goSelectCity" v-else>{{cityName}}</view>
				<view v-if="isStor" @click="selectStorModel">选择门店</view>
				<view @click="selectStorModel" v-else>
					{{storeNames}}
				</view>	
			</view> -->
			<u-picker v-if="showStore" :show="showStore" keyName="label" :columns="storeList" title="门店" @cancel="storCancel" @confirm="storeConfirm"></u-picker>
			<!-- 搜索框 -->
			<view class="serach-wrap">
				<!-- <view class="serach-wrap-city" >{{cityName}}</view> -->
				<view class="serach-wrap-img-box">
					 <image class="img" src="../../static/car_icon_position@2x.png"></image>
				</view>
				<view class="serach-wrap-dealer" @click="goSelectCity">
					<view class='dealer-text'>
						<text >{{cityName}}</text>
						<u-icon name="arrow-right" color="#333" size="12" style='margin-top:5upx'></u-icon>
					</view>
					
				</view>
			    <u-search shape="square" v-model="keywords" bgColor="#F8F8F8 " placeholder="车型名称搜索" placeholderColor="#CDCDCD" :showAction="false" @click="doSearch(keywords)" @search="doSearch(keywords)"></u-search>
			</view>
			<view class="select-wrap">
			    <view class="select" @click="selectModel"><text style="margin-right: 5upx;font-size: 28upx;font-weight: bold;color: #333;">{{conditionValue0}}</text>
			        <u-icon name="arrow-down" size="16" color="#333"></u-icon>
			    </view>
			    <view class="select" @click="selectRenttype"><text style="margin-right: 5upx;font-size: 28upx;font-weight: bold;color: #333;">{{conditionValue1}}</text>
			        <u-icon name="arrow-down" size="16" color="#333"></u-icon>
			    </view>
			</view>
		</view>

        <!-- 列表 -->
        <view style="padding: 0 16px;" v-if="dataList.length>0">
            <DirveCard v-for="(item,index) in dataList" :key="index" :itemData="item" @itemClick="itemClick(item)">
            </DirveCard>
            <u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
        </view>

        <no-data v-else></no-data>

        <!-- 底部导航 -->
        <!-- #ifndef H5 -->
        <HomeTabbar :tab="1"></HomeTabbar>
        <!-- #endif -->
		<u-popup :show="showfeiyong" mode="bottom" round="10" style="position: relative;">
			<view class='info-box'>
				<view class='title-box'>
					<view class='title-box-text'>请选择门店</view>
					<view class="close-img-box" @click='showfeiyong=false'>
						<image class="close-img" src="../../static/window_icon_close.png"></image>
					</view>
					
				</view>
				<view style='margin-bottom: 100upx;'>
					<view class='value-box-title'>
						<image class="close-img" src="../../static/window_icon_location.png"></image>
						<text style='margin-left: 2px;'>{{cityName}}</text>
					</view>
					<view class='value-box-value' v-for="(item,index) in storeLists" @click=storClick(index,item) :key='index' :class="{'bg-border':index==seletIndex}" >
						<view class='value-name'>{{item.storeName}}</view>
						<view>所属经销商：{{item.tenantName}}</view>
					</view>
				</view>
				<view class="bottom2" @click='costCommit()'>选择更多门店</view>
			</view>
		</u-popup>
        <!-- 登录弹窗 -->
        <!-- <LoginMask></LoginMask> -->
		<u-popup :show="showCondition" mode="bottom" round="10" style="position: relative;">
			<view class='info-box'>
				<view class='title-box'>
					<view class='title-box-text'>{{conditionTitle}}</view>
					<view class="close-img-box" @click='showCondition=false'>
						<image class="close-img" src="../../static/window_icon_close.png"></image>
					</view>
					
				</view>
				<view style='margin-bottom: 100upx;max-height: 400upx;overflow-y: auto;'>
					<view v-for="(item,index) in conditionList" class='info-value' @click=typeClick(item) :key='index'>
						<view class='info-value-text' style="font-size: 28upx;">{{item}}</view>
						<view v-if="selectType==1">
							<view class='info-value-money' v-if="typeValue==item">
								<image class="ok-img" src="../../static/window_icon_right.png"></image>
							</view>
						</view>
						<view v-if="selectType==2">
							<view class='info-value-money' v-if="typeValue1==item">
								<image class="ok-img" src="../../static/window_icon_right.png"></image>
							</view>
						</view>	
					</view>
				</view>
				
				<view class="bottom2" :class="isIos?'bottom3':''" @click='confirm()'>确定</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
import HomeTabbar from '@/components/layout/tabbar.vue';
import DirveCard from '@/components/card/dirve-card.vue';
import {
    conditionnew,
    scheme,
	getTokenInfo
} from '../../common/apis/home-api.js';
import {getMaintenanceStore} from '../../common/api.js';
import cityData from '@/util/city.js'

export default {
    components: {
        HomeTabbar,
        DirveCard,
        // LoginMask,
    },
    data() {
        return {
			showSubmitModal:false,
			typeValue:'',
			deptIds:'',
			storeList:[],
			storeNames:'请选择门店',
			storeId:'',
			lat:'',
			lon:'',
			isStor:true,
			showStore:false,
			cityName:'北京市',
			isCity:true,
            conditionTitle: '请选择',
            showCondition: false,
            conditionList: [],
            carModelTypeList: [],
            schemeTypeList: [],
            pageNo: 1,
            bizType: 7,
            schemeType: -1,
            keywords: '',
            modelTypeSearchValue: -1,
            dataList: [],
            selectCondition: [0, 0],
            selectConditionIndex: -1,
            conditionValue0: '选择款型',
            conditionValue1: '租赁方式',
            loadingStatus: 'loading',
			showfeiyong:false,
			storeLists:[],
			seletIndex:0,
			isIos:false,
			selectType:'',
			typeValue1:'',
        };
    },
	mounted(){
		// #ifdef H5
		// if(uni.getStorageSync('cityCode')){
		// 	cityData.list.forEach((item1, index1) => {
		// 		item1.data.forEach((item2, index2) => {
		// 			if (item2.code==uni.getStorageSync('cityCode')) {
		// 				this.cityName = item2.cityName
		// 				uni.setStorageSync('cityName', item2.cityName);
						
		// 			}
		// 		})
		// 	})
		// }
		// this.pageNo = 1;
		// this.getListData()
		// #endif
	},
    computed: {
        deptId() {
            return this.$store.state.user.deptId;
        },
        storeName() {
            return this.$store.state.app.storeInfo.storeName;
        },
    },
    methods: {
		typeClick(info){
			if(this.conditionTitle == "请选择款型"){
				this.typeValue = info?info:'请选择款型'
			}
			if(this.conditionTitle == "请选择租赁方式"){
				this.typeValue1 = info?info:'请选择租赁方式'
			}
			
		},
		storClick(index,info){
			this.seletIndex = index
			this.storeNames = info.storeName
			uni.setStorageSync('storeId', info.storeId);
			uni.setStorageSync('storeName', info.storeName);
			uni.setStorageSync('tenantName', info.tenantName);
			this.deptIds = info.storeId
			uni.setStorageSync('deptId', info.storeId);
			this.showfeiyong = false
			this.$store.commit('app/setStoreInfo', info);
			this.getListData()
		},
		costCommit(){
			this.showfeiyong = false
			uni.navigateTo({
				url: '/pages/select-store/select-store',
			})
		},
		getData(info) {
			getMaintenanceStore({
				type: info
			}).then(res => {
				
				if(res.length>0){
					res.map((item)=>{
						item.id = item.id
						item.label = item.storeName
					})
					this.storeList = [res]
				}
			})
		},
		storeConfirm(e){
			this.showStore = false;		
			this.storeName = e.value[0].label
			this.storeId = e.value[0].id
			this.lat = e.value[0].lat
			this.lon =e.value[0].lon
		},
		storCancel(){
			this.showStore = false
		},
		selectStorModel() {
		    this.showStore = true;
		},
        goSelectCity(){
            uni.navigateTo({
                url: '/pagesB/selectCity/selectCity?currentCity='+ this.cityName+'&type=carPage'
            })
        },
        getConditionData() {
            conditionnew().then(res => {
                this.carModelTypeList = res.carModelTypeList;
                this.schemeTypeList = res.schemeTypeList;
            })
        },

        selectModel() {
			this.selectType = 1
			this.conditionList = []
            let conditionList = this.carModelTypeList.map(item => {
                return item.dictValue
            });
			// this.typeValue = ''
            // H5中不显示van车型
			// #ifdef H5
			conditionList.map((item)=>{
				if(item !== 'VAN'){
					this.conditionList.push(item)
				}
			})
			// #endif
			// #ifndef H5
			this.conditionList = conditionList;
			// #endif
            this.showCondition = true;
            this.conditionTitle = "请选择款型";
            this.selectConditionIndex = 0;
        },

        selectRenttype() {
			this.selectType = 2
			this.conditionList = []
            let conditionList = this.schemeTypeList.map(item => {
                return item.dictValue
            });
            // this.typeValue = ''
            this.conditionList = conditionList;
            this.showCondition = true;
            this.conditionTitle = "请选择租赁方式";
            this.selectConditionIndex = 1;
        },

        getListData() {
			 scheme({
				pageNo: this.pageNo,
				pageSize: 10,
				bizType: this.bizType,
				deptId: '0',
				cityCode:uni.getStorageSync('cityCode')?uni.getStorageSync('cityCode'):'110000',
				schemeType: this.schemeType,
				keywords: this.keywords,
				modelTypeSearchValue: this.modelTypeSearchValue,
			}).then(res => {
					uni.hideLoading()
				    if (this.pageNo == 1) {  
						this.dataList = [];
				        this.pageNo++;
				        uni.stopPullDownRefresh();
				
				        this.loadingStatus = 'loadmore';
				    } else {
				        if (!uni.$u.test.isEmpty(res)) {
				            this.pageNo++;
				
				            this.loadingStatus = 'loadmore';
				        } else {
				
				            this.loadingStatus = 'nomore';
				        }
				    }
				
				    if (!uni.$u.test.isEmpty(res)) {
				        this.dataList = this.dataList.concat(res);		
				    }
				
				})
           
        },

        change(e) {
        },

        close() {
            this.showCondition = false
        },
        confirm() {
            this.showCondition = false;
            if (0 === this.selectConditionIndex) {
                this.conditionValue0 = this.typeValue?this.typeValue:'选择款型'
				this.carModelTypeList.map((res)=>{
					if(res.dictValue == this.typeValue){
						this.modelTypeSearchValue = res.dictCode
					}
				})   
            } else {
                this.conditionValue1 = this.typeValue1?this.typeValue1:'请选择租赁方式'
				this.schemeTypeList.map((res)=>{
					if(res.dictValue == this.typeValue1){
						this.schemeType = res.dictCode
					}
				})
            }

            this.pageNo = 1;
            this.getListData();

        },
        itemClick(item) {
            uni.navigateTo({
                url: './cardetail/cardetail?bizType=' + this.bizType + "&schemeId=" + item.schemeId + "&subSchemeId=" + item.subSchemeId  + "&subSchemeRentId=" + item.subSchemeRentId +  "&cavanFlag=" + item.cavanFlag
            })
        },
 
        doSearch(value) {
            this.pageNo = 1;
            this.getListData();
        },
        cancel() {
            this.showCondition = false
        },

        clickloadmore() {
            this.getListData();
            this.showloading = true;
            this.loadingStatus = 'loading'; 
        },

		onShareAppMessage() {
			return {
				path: '/pages/home/home?customerId=' + this.$store.state.user.userInfo.customerId + '&deptId='+this.$store.state.user.deptId
			}
		},

    },
    onPullDownRefresh() {
        this.pageNo = 1;
        this.getListData();
    },
    onReachBottom() {
        this.getListData();
        this.showloading = true;
        this.loadingStatus = 'loading';
    },
    async onLoad() {
		uni.$on('emit', res=>{
			this.cityName = res
			this.isCity = false
			this.conditionValue0 = '选择款型'
			this.conditionValue1 = '请选择租赁方式'
			this.schemeType = ''
			this.modelTypeSearchValue = ''
			this.pageNo = 1;
			this.typeValue = ''
			this.typeValue1 = ''
			this.getListData();
			// uni.setNavigationBarTitle({
			//     title:'选车'
			// })
			//  uni.setNavigationBarColor({
			// 	frontColor: '#000000', // 前景色（标题颜色）
			// 	backgroundColor: '#FFFFFF', // 背景色
			// });
		})
		this.getConditionData()
    },
    onShow() {
		this.typeValue = ''
		this.typeValue1 = ''
		this.conditionValue0 = '选择款型'
		this.conditionValue1 = '请选择租赁方式'
		this.schemeType = ''
		this.modelTypeSearchValue = ''
		const type = uni.getStorageSync('modelType')
		if(type=='iphone'){
			this.isIos = true
		}else{
			this.isIos = false
		}
		uni.showLoading({
		  title: '加载中'
		})
		setTimeout(()=>{
			uni.hideLoading()
		},1000)
		this.storeNames = uni.getStorageSync('storeName')?uni.getStorageSync('storeName'):"选车"
		console.log(this.storeNames,'this.storeNamesthis.storeNames')
		uni.setNavigationBarTitle({
		    title: '选车'
		})
		 uni.setNavigationBarColor({
			frontColor: '#000000', // 前景色（标题颜色）
			backgroundColor: '#FFFFFF', // 背景色
		});
		// #ifndef H5
			this.cityName = uni.getStorageSync('cityName')?uni.getStorageSync('cityName'):'北京市'
			this.pageNo = 1;
			this.getListData();
		// #endif
		// #ifdef H5
			if(uni.getStorageSync('cityCode')){
				cityData.list.forEach((item1, index1) => {
					item1.data.forEach((item2, index2) => {
						if (item2.code==uni.getStorageSync('cityCode')) {
							this.cityName = item2.cityName
							uni.setStorageSync('cityName', item2.cityName);
							
						}
					})
				})
			}
			this.pageNo = 1;
			this.getListData()
		// #endif
    }
};
</script>

<style lang="scss" scoped>
	.head-bg{
		height: 160upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.title{
			font-weight: bold;
		}
	}
	.ok-img{
		width:32upx ;
		height: 32upx;
	}
	.info-value{
		display: flex;
		justify-content: space-between;
		padding:32upx;
		font-size: 24upx;
		color:#000000;
		height: 40upx;
	}
.page {
    // padding: $page_padding;
}
.bg-border{
	border:2upx solid #173B42;
	border-radius: 16upx;
}
.bg {
    width: 100vw;
    height: 240upx;
    margin: 0 -20upx;
}
.info-box{
		background-color:#F8F8F8 ;
		padding:32upx;
		
		.bottom2 {
			position:absolute;
			bottom: 30upx;
			width: 90%;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			background-color: $redec;
			border-radius: 8upx;
			color:#ffffff;
			font-size: 32upx;
		}
		.bottom3{
			position:absolute;
			bottom: 70upx;
		}
		.value-box-title{
			display: flex;
			align-items: center;
			font-size: 28upx;
			color:#000000;
			margin-bottom: 24upx;
			.close-img{
				width: 32upx;
				height: 32upx;
			}
		}
		.value-box-value{
			background-color: #ffffff;
			padding:24upx;
			color:#999999 ;
			font-size: 24upx;
			.value-name{
				color:#000000 ;
				font-size:32upx;
				margin-bottom:24upx ;
				font-weight: bold;
			}
		}
		.title-box{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 32upx;
			.title-box-text{
				font-size:32upx ;
				font-weight: bold;
				color:#000000,
				
			}
			.close-img-box{
				width:34upx ;
				height:34upx;
				
				.close-img{
					width:32upx ;
					height:32upx;
				}
			}
			
		}
	}
.top-bg{
	width: 100%;
	height: 202upx;
	// background: linear-gradient(to bottom, rgba(67,133,144,100) , rgba(248,248,248,0) );
	background-color: #fff;
	@include flex(column);
	margin-bottom: 24upx;
}

.serach-wrap {
    margin: 36upx 32upx 0px 32upx;
	height: 64upx;
    background: #fff;
    border-radius: 16uupx;
	display: flex;
	align-items: center;
	.serach-wrap-img-box{
		width:40upx ;
		height: 40upx;
		margin-right: 8upx;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.serach-wrap-city{
		height:28upx;
		line-height: 28upx;
		padding:6upx 12upx;
		background-color:#DDEFFE;
		color:#173B42;
		font-size: 20upx;
		margin-right:4px;
		max-width: 20%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		
	}
}
.serach-wrap-dealer{
	max-width:30%;
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-right: 24upx;
	.dealer-text{
		
		color:#000000;
		font-weight: bold;
		display: flex;
		align-items: center;
		text{
			max-width: 170upx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size:28upx ;
			margin-right: 6upx;
		}
	}
}

.serach-box{
	width: 100%;
	height: 50upx;
	display: flex;
	justify-content: space-around;
	margin-top:10upx;
	cursor: pointer;
	color: #fff;
}
.select-wrap {
        font-size: 28upx;
        font-weight: bold;
        color: #000000;
		margin:32upx;
		margin-top:40upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		

        .select {
			display: flex;
            background: #fff;
        }
    }

.filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin: 20upx 40upx 30upx;

    .title {
        font-size: 32upx;
        font-weight: bold;
        color: #333;
    }

    view {
        display: flex;
    }

    
}

</style>
